﻿<div id="Grid"></div>

<script>
    jQuery(function () {
        jQuery("#Grid").kendoGrid({
            columns: [{
                title: "Order ID",
                field: "OrderID"
            }, {
                title: "Employee ID",
                field: "EmployeeID",
                values: [{
                    text: "Anrew",
                    value: "1"
                }, {
                    text: "John",
                    value: "2"
                }, {
                    text: "Peter",
                    value: "3"
                }, {
                    text: "Ivan",
                    value: "4"
                }, {
                    text: "Nancy",
                    value: "5"
                }]
            }, {
                title: "Order Description",
                field: "OrderDescription",
            }, {
                title: "Order Date",                
                field: "OrderDate",
                format: "{0:d}"
            }, {
                command: [{
                    name: "destroy",
                    buttonType: "ImageAndText",
                    text: "Delete"
                }]
            }],
            pageable: {
                buttonCount: 10
            },
            sortable: true,
            filterable: true,
            scrollable: {
                height: "200px"
            },
            editable: {
                confirmation: "Are you sure you want to delete this record?",
                confirmDelete: "Delete",
                cancelDelete: "Cancel",
                mode: "incell",
                template: null,
                create: true,
                update: true,
                destroy: true
            },
            toolbar: {
                command: [{
                    name: null,
                    buttonType: "ImageAndText",
                    text: "Add new record"
                }]
            },
            messages: {
                noRecords: "No records available."
            },
            dataSource: {
                type: (function () {
                    if (kendo.data.transports['aspnetmvc-ajax']) {
                        return 'aspnetmvc-ajax';
                    } else {
                        throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                    }
                })(),
                transport: {
                    read: {
                        url: "/Home/Read"
                    },
                    update: {
                        url: "/Home/Update"
                    },
                    create: {
                        url: "/Home/Create"
                    },
                    destroy: {
                        url: "/Home/Delete"
                    }
                },
                pageSize: 10,
                page: 1,
                total: 0,
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: {
                        id: "OrderID",
                        fields: {
                            OrderID: {
                                editable: false,
                                type: "number"
                            },
                            OrderDate: {
                                type: "date"
                            },
                            OrderDescription: {
                                type: "string"
                            },
                            EmployeeID: {
                                type: "number"
                            }
                        }
                    }
                }
            }
        });
    });
</script>


<p>Pressing the saveChanges will send all current changes to the server:</p>
<button onclick="sendData()">Save Changes</button>

<script>    
    function sendData() {
        var grid = $("#Grid").data("kendoGrid"),
            parameterMap = grid.dataSource.transport.parameterMap;
        
        //get the new and the updated records
        var currentData = grid.dataSource.data();
        var updatedRecords = [];
        var newRecords = [];

        for (var i = 0; i < currentData.length; i++) {
            if (currentData[i].isNew()) {
                //this record is new
                newRecords.push(currentData[i].toJSON());
            } else if(currentData[i].dirty) {         
                updatedRecords.push(currentData[i].toJSON());
            }
        }

        //this records are deleted
        var deletedRecords = [];
        for (var i = 0; i < grid.dataSource._destroyed.length; i++) {
            deletedRecords.push(grid.dataSource._destroyed[i].toJSON());
        }
        
        var data = {};
        $.extend(data, parameterMap({ updated: updatedRecords }), parameterMap({ deleted: deletedRecords }), parameterMap({ new: newRecords }));

        $.ajax({
            url: "/Home/UpdateCreateDelete",
            data: data,
            type: "POST",
            error: function () {
                //Handle the server errors using the approach from the previous example
            },
            success: function () {
                alert("update on server is completed");
                
                grid.dataSource._destroyed = [];
                //refresh the grid - optional
                grid.dataSource.read();
            }
        })
    }
</script>
